<template>
  <div style="display: inline-block; margin: 10px 10px;">
    <el-card class="box-card">
      <div style="padding: 20px 20px;float: left;">
        <a  :href="'#/research?rid='+rid"> 
        <img :src="imgUrl" style="height:220px">
        </a>
      </div>
      <div style="padding: 10px 0px;text-align: left;">
        <h2 style="text-align: center;padding-bottom:20px" > <a  :href="'#/research?rid='+rid"> {{title}} </a> </h2>
        <p>{{detail}}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    title : {type:String,default:""},
    detail: {type:String,default:""},
    imgUrl : {type:String,default:"https://dummyimage.com/1600x900/ff6a00/fff"},
    rid:  {type:String,default:"0"},
  },

};
</script>

<style lang="less" scoped>
  /deep/.el-card__header{ padding: 10px 20px;}
  /deep/.el-card__body{ padding: 10px 20px;}
  .el-card{ width:1200px;height: 280px; border-radius:20px; }
  a{ text-decoration : none; } 
</style>
